<template>
	<view class="moxi_c_diy_grid" >
		<view class="moxi_c_diy_grid_li" @click="click(list.url)"  v-for="list in set.listData" 
		:style="{flex:  '0 0'+(100/set.col)+'%',margin:set.margin&&set.margin>0?set.margin+'px 0':'0'}">
			<img :src="list.icon" alt="" :style="'width: '+set.size+'px;height: '+set.size+'px;object-fit: cover'">
			<!-- <text v-if="set.showTitle==1" :style="'color: '+ set.titleColor">{{list.title}} </text> -->
			<text v-if="set.showTitle==1" 
			:style="{'color': (list.color&&list.color.length>0?list.color:set.titleColor),
			'font-size':list.size + 'px'}">{{list.title}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name:"diy-grid",
		data() {
			return {
				
			};
		},
		props:{
			 set:{
				type:Object,
			 	default(){
					return {
						col:4,
						border:0,
						size:50,
						showTitle:1,
						titleColor:"#909399",
						listData:{
						   
						}
					}
				}
			 }
			
		},created() {
		},methods:{
			click(e){
				this.navto(e);
			}
		}
	}
</script>

<style>
.moxi_c_diy_grid{display: flex;flex-direction: row;justify-content: flex-start;
align-items: center;flex-wrap: wrap}
    .moxi_c_diy_grid_li{display: flex;flex-direction: column;
	text-align: center;align-items: center;}
    .moxi_c_diy_grid_li img{width: 100%;height: 100%;max-width: 70px;max-height: 70px;}
    .moxi_c_diy_grid_li h4{font-size: 14px;color: #909399;width: 100%;height: 24px;padding: 5px 0}
	.moxi_c_diy_grid_li text{font-size: 14px;}
</style>